<template>
    <div style="font-size: 16px;font-weight: 600;">
        <el-radio></el-radio>呼叫统计
    </div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <el-form-item>
            <ren-dept-tree placeholder=" 所属部门" :query="true"  v-model="state.dataForm.deptName"></ren-dept-tree>
        </el-form-item>
        <el-form-item>
            <el-input v-model="state.dataForm.username" placeholder="姓名" style="width: 210px;" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-date-picker v-model="state.dataForm.startDate" type="date" placeholder="开始日期"
                style="width: 220px"></el-date-picker>
        </el-form-item>
        <el-form-item label-width="0px">
            <el-date-picker v-model="state.dataForm.endDate" type="date" placeholder="结束日期"
                style="width: 220px"></el-date-picker>
        </el-form-item>
        <!-- 查询离职人员 -->
        <el-form-item>
            <el-checkbox v-model="state.dataForm.dimission">查询离职人员</el-checkbox>
        </el-form-item>
        <!-- 查询 -->
        <el-form-item>
            <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <!-- 导出 -->
        <el-form-item v-if="state.hasPermission('call:statistic:export')" >
            <el-button type="primary" @click="state.exportHandle()">{{ $t("export") }}</el-button>
        </el-form-item>
        <!-- 导出费用 -->
        <el-form-item v-if="state.hasPermission('call:statistic:export')">
            <el-button   type="primary" >导出费用</el-button>
        </el-form-item>
        <!-- 自动考核 -->
        <el-form-item v-if="state.hasPermission('crm:nocdescribetelassess:autoAssess')">
            <el-button type="primary"  @click="autoAssess()">自动考核</el-button>
        </el-form-item>
        <!-- 手动考核 -->
        <el-form-item v-if="state.hasPermission('crm:nocdescribetelassess:selectedManual')">
            <el-button type="primary"  @click="manualassessment()">手动考核</el-button>
        </el-form-item>
        <div>
            <el-form-item>
                人数：<b>{{ state.dataForm.people }}</b>
            </el-form-item>
            <el-form-item>
                通话量：<b>{{ state.dataForm.total }}</b>
            </el-form-item>
            <el-form-item>
                接通量： <b>{{ state.dataForm.jtTotal }}</b>
            </el-form-item>
            <el-form-item>
                大于等于10s：<b>{{ state.dataForm.tenTotal }}</b>
            </el-form-item>
            <el-form-item>
                无人接听：<b>{{ state.dataForm.wjtTotal }}</b>
            </el-form-item>
            <el-form-item>
                接听率：<b>{{ state.dataForm.rate }}</b>
            </el-form-item>
        </div>
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
            v-loading="state.dataListLoading" :data="state.dataList" border
            @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column align="center" prop="dept" label="项目组" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="username" label="姓名" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="total" label="通话量" min-width="60"
                show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="jtTotal" label="接通量" min-width="60"
                show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="tenTotal" label="≧10s" min-width="60"
                show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="wjtTotal" label="无人接听" min-width="60"
                show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="jtRate" label="接通率" min-width="60"
                show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="result" label="考核达标" show-overflow-tooltip>
                <template #default="{ row }">
                    <span v-if="row.result === '1'">达标</span>
                    <span v-else-if="row.result === '0'">不达标</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <examine :key="addKey" ref="manualassessmentRef" @refreshDataList="state.getDataList"></examine>
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import examine from "./examine-list.vue";
const view = reactive({
    getDataListURL: '/tccc/reportDescribeTelCdr',
    getDataListIsPage: true,
    deleteURL: "/crm/crmperson",
    deleteIsBatch: true,
    exportURL: "/tccc/export",
    daterange: null,
    dataForm: {
        limit: 10,
        page: 1,
        username: '',
        startDate: new Date(), // 这里设置为当前日期
        endDate: new Date(),   // 这里设置为当前日期
        dimission: false,//查询；离职人员
        jtTotal: "",//接通量
        result: "",//考核达标
        tenTotal: "",//大于十秒数量（≥10）
        jtRate: "",//接通率
        total: "",//通话量
        wjtTotal: "",//无人接听
        people: "",//人
        rate: "",//接通率
        deptName:"",//所属部门
    },
});

//初始化
const init = () => {
    getinfo()

};

//显示页面
const getinfo = () => {
    baseService.get("tccc/reportDescribeTelCdrCount").then((res) => {
        state.dataForm.jtTotal = res.data.count.jtTotal
        state.dataForm.people = res.data.count.people
        state.dataForm.total = res.data.count.total
        state.dataForm.wjtTotal = res.data.count.wjtTotal
        state.dataForm.tenTotal = res.data.count.tenTotal
        state.dataForm.rate = res.data.count.rate

    });
};

const state = reactive({ ...useView(view), ...toRefs(view) });
const addKey = ref(0);
const manualassessmentRef = ref();
const manualassessment = (id?: number) => {
    addKey.value++;
    nextTick(() => {
        manualassessmentRef.value.init(id);
    });
};

//导出费用
const exportHandle = () => {
  window.location.href = "noc/nocdescribelog/export?username="+state.dataForm.username+"&startDate="+state.dataForm.startDate+"&endDate="+state.dataForm.endDate+"&deptIdList=";
};

//自动考核
const autoAssess = () =>{
  if( state.dataForm.startDate != state.dataForm.endDate){
    ElMessage.error('请选择具体一天时间进行考核');
    return;
  }

  var url = "crm/nocdescribetelassess/autoAssess";
  var params = {
    'username':state.dataForm.username,
    'startDate': state.dataForm.startDate,
    'endDate': state.dataForm.endDate,
    //'deptIdList': state.dataForm.deptIdList,
  };

  baseService.post(url, params).then((res) => {
    if(res.code === 0){
      ElMessage.success('操作成功');
      state.getDataList();
    }else{
      ElMessage.error(res.msg);
    }
  });

}

//页面进入执行
init();

</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
    white-space: nowrap;
}
</style>
